<template>
  <div class="activity_box" :style="{width:tranString}">
    <div v-for="(item,index) in activity"  v-if="index==0 && activity[0].type =='10'&&product.type !=2">
      <div class="activity_four">
        <div class="activety_left">
          <text class="activity_left_title" v-if="item.type == 10">新人价</text>
        </div>
        <div class="activity_right" style="background-color: orange">
          <text class="activity_right_title">¥{{item.price | price}}</text>
        </div>
      </div>
    </div>
    <!--        <div v-for="(item,index) in activity"  v-if="index==0 && activity[0].type =='100'&&product.type !=2">-->
    <!--          <div class="activity_four">-->
    <!--            <div class="activety_left">-->
    <!--              &lt;!&ndash;                    <text class="activity_left_title" v-if="item.type == '100'">VIP</text>&ndash;&gt;-->
    <!--              <text class="activity_left_title">{{vipPriceName}}</text>-->
    <!--            </div>-->
    <!--            <div class="activity_right">-->
    <!--              <text class="activity_right_title">¥{{item.price | price}}</text>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--        <div style="display:flex;flex-direction: row;align-items: flex-end;margin-top: 10px" v-if="activity.length >0&&product.type !=2">-->
    <!--            <text class="column_product_price_newTitle" v-if="activity[0].type =='8'">¥{{activity[0].price}}</text>-->
    <!--            <text class="column_product_price" v-if="activity[0].type =='8'">¥{{price | price}}</text>-->
    <!--        </div>-->
    <!--        <div  style="display: flex;flex-direction: row;align-items: flex-end;margin-top: 10px" v-if="point>0&&product.type ==2"  >-->
    <!--            <text style="padding-left: 10px;font-size: 24px">兑换券:</text>-->
    <!--            <text class="column_product_point_newTitle" >{{point  | number}}</text>-->
    <!--        </div>-->
    <!--        <div style="display: flex;flex-direction: row;align-items: flex-end;margin-top: 10px" v-if="product.type !=2">-->
    <!--            <text style="padding-left: 10px;font-size: 24px">惠民价:</text>-->
    <!--            <text class="column_product_price_newTitle" v-if="activity.length ==0 || (activity.length >0 && activity[0].type !='8')">¥{{price | price}}</text>-->
    <!--            <text class="column_product_marketPrice" v-if="activity.length ==0 && marketPrice!=price">¥{{marketPrice | price}}</text>-->
    <!--        </div>-->


    <div v-if="profitTransfer" style="display: flex;flex-direction: row;align-items: flex-end;margin-top: 10px">
      <div class="product-item-middle-give-wrap">
        <div class="product-item-middle-give">
          <div class="product-item-middle-present center">
            <text class="product-item-middle-present-text">赠</text>
          </div>
          <div class="product-item-middle-certificate">
            <text class="product-item-middle-certificate">{{profitTransfer*5}}%兑换券</text>
          </div>
        </div>
      </div>
    </div>

    <div style="display: flex;flex-direction: row;align-items: flex-end;margin-top: 10px;width: 280px;">
      <!--        <text style="padding-left: 10px;font-size: 24px">价格:</text>-->
      <text class="column_product_price_newTitle" v-if="activity.length ==0 || (activity.length >0 && activity[0].type !='8')">¥{{price | price}}</text>
      <text class="column_product_marketPrice" v-if="activity.length ==0 && marketPrice!=price">¥{{marketPrice | price}}</text>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      profitTransfer:'',
      activity:[],
      globalData:{},
    }
  },
  props:['tranString','promotions','price','marketPrice','vipPrice','point','product',"profitTransfer"],
  created() { // 在实例创建完成后被立即调用
    this.tranString=this.tranString+'px'
    this.updatePromotion()
  },
  filters:{
    price(value) {
      var toFixedNum = Number(value).toFixed(3);
      var realVal = toFixedNum.substring(0, toFixedNum.toString().length - 1);
      return realVal;
    },
    number(value){
      var toFixedNum = Number(value).toFixed(0);
      return toFixedNum;
    }
  },
  methods: {
    updatePromotion() {
      var _this = this
      _this.activity = []

      if(!this.isNull(_this.vipPrice)){
        if(Number(_this.vipPrice)<=Number(_this.price)){
          var vipPrice = {
            price: _this.vipPrice,
            type: '100',
            title: 'VIP'
          }
          _this.activity.push(vipPrice)
        }
      }

      _this.promotions.forEach(function(item){
        if (item.type == '10' || item.type=='8') {
          _this.activity.push(item)
        }
      })

      _this.activity.sort((a, b) => { return a.price - b.price })

    }
  },
  components: {},
}
</script>

<style scoped>
.activity_box {
  display: flex;
  /*width: 300px;*/
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10px;
}

.activity_four {
  border-radius: 60px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  margin-right: 10px;
  overflow: hidden;
}

.activety_left {
  background-color: rgba(94, 74, 74, 1);
  padding:4px 12px;
}

.activity_right_title {
  font-size: 24px;
  font-weight: bold;
  color: rgba(94, 74, 74, 1);
  line-height: 34px;
  height: 32px;
  display: block;
}

.activity_left_title {
  font-size: 24px;
  color: rgba(247, 219, 194, 1);
  line-height: 34px;
  height: 32px;
  display: block;
}

.activity_right {
  padding: 4px 12px;
  background-color: rgba(247, 219, 194, 1);
}

.column_product_price_box {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
  height: 50px;
}


.column_product_point_newTitle {
  /*font-size: 36px;*/
  font-size: 30px;
  font-weight: bold;
  margin-right: 10px;
  /* height: 36px; */
  line-height: 30px;
}


.column_product_price_newTitle {
  font-size: 32px;
  /*font-size: 26px;*/
  font-weight: bold;
  color: rgba(231, 91, 83, 1);
  margin-right: 10px;
  /* height: 36px; */
  line-height: 30px;
}

.column_product_price {
  font-size: 22px;
  color: rgba(0, 0, 0, 0.5);
  text-decoration: line-through;
  line-height: 40px;
}
.column_product_marketPrice{
  font-size: 32px;
  color: rgba(0, 0, 0, 0.5);
  text-decoration: line-through;
}


.product-item-middle-give-wrap{
  display: flex;
  flex-direction: row;
  justify-items: flex-start;
}

.product-item-middle-give{
  display: flex;
  flex-direction: row;

  height: 38px;

  border-top-left-radius: 16px;
  border-bottom-right-radius: 16px;

  border-top-style: solid;
  border-top-width: 2px;
  border-top-color:#ff8400;

  border-left-style: solid;
  border-left-width: 2px;
  border-left-color:#ff8400;

  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color:#ff8400;

  border-right-style: solid;
  border-right-width: 2px;
  border-right-color:#ff8400;
}
.product-item-middle-present{
  width:38px;
  height:38px;
  background-color:#ff8400;
}
.product-item-middle-present-text{
  font-size:26px;
  color: white;
}
.product-item-middle-certificate{
  margin-left: 5px;
  margin-right: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size:26px;
  color:#ff8400;
}
.center{
  display: flex;
  align-items: center;
  justify-content: center;
}

</style>
